<script setup>
import { ElMessage } from 'element-plus'
import { uploadFile } from '@/api/uploadFiles.js'
import { ref } from 'vue'
 const props = defineProps({
    accept: String ,   // 上传类型
    action: String,   // 上传地址   ''
    limit: Number, // 最大允许上传文件数
    type: String,  // 上传类型合同还是营业执照 
     fileList: {    // 编辑时需要传的数据
         type: Array
     }  // 文件列表
})
const emit = defineEmits(['transmit'])  // 监听transmit事件接收id 和url
const beforeRemove = () => { }  // 删除之前的钩子
const handleExceed = () => { }
const url = ref('')
const urlId = ref('')
// 上传文件
const handleUpload = async (e) => {
  const formDate = new FormData()
  formDate.append('file', e.file)
  formDate.append('type', props.type)
  const res = await uploadFile(formDate)
  ElMessage.success({
    message: '文件上传成功',
    type: 'success',
  })
  urlId.value = res.data.id
    url.value = res.data.url
    emit('transmit', {urlId:urlId.value,url:url.value} )
}
</script>
<template>
    <el-upload class="upload-demo" :accept="accept"
     :action="action" 
    :http-request="handleUpload"
    :before-remove="beforeRemove" 
     multiple 
    :limit="limit" 
    :file-list="fileList"
    :on-exceed="handleExceed">
    <el-button size="small" type="primary">点击上传</el-button>
    <template #tip>
        <div class="el-upload__tip">支持扩展名: {{accept}} 文件，且不超过 5M</div>
    </template>
    </el-upload>

</template>


<style  scoped>
    
</style>